<template>
    <div>
        <el-dialog :title="'添加店铺'+$route.name" :visible="shopVisible" @update:visible="v=>$emit('update:shopVisible',false)">
            <el-form>
                <el-form-item label="店铺名称:" label-width="120px">
                    <el-input v-model="shopForm.shopName" autocomplete="off" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="店铺类别:" label-width="120px">
                    <el-select v-model="shopForm.shopTypeId" placeholder="请选择">
                        <el-option
                                v-for="item in $store.state.shop.allShopTypeList"
                                :key="item._id"
                                :label="item.shopTypeName"
                                :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="店铺图片:" label-width="120px">
                    <el-upload
                            :headers="{
                              authorization:$store.state.admin.token
                            }"
                            name="shopPic"
                            :data="shopForm"
                            ref="upload"
                            :file-list="fileList"
                            :limit="1"
                            :auto-upload="false"
                            :on-success="success"
                            class="upload-demo"
                            action="/api/shopList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png/bmp/gif文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('update:shopVisible',false)">取 消</el-button>
                <el-button type="primary" @click="upShopInfo">提 交</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "dialogs",
        props:{
            shopVisible:{
                props: Boolean,
                default:false
            },
            shopTypeId:{
                type: String,
                default: ""
            },
            shopInfo:{
                type:Object,
                default(){
                    return {}
                }
            },
            shopTypeId:{
                type:String,
                default:""
            }
        },
        data(){
            return{
                fileList:[],
                shopForm:{
                    shopName:"",
                    shopTypeId:""
                },

            }
        },
        methods:{
            async upShopInfo(){
                if(this.shopInfo._id){
                    const formData=new FormData()
                    formData.set("shopId",this.shopInfo._id)
                    for(let key in this.shopForm){
                        formData.set(key,this.shopForm[key])
                    }
                    formData.set("shopPic",document.querySelector(".el-upload__input").files[0])
                    const results=await this.$http.put("/shopList",formData)
                    this.success(results)

                }else{
                    this.$refs.upload.submit()
                    }
            },
            success(res){
                if(res.ok===1){
                    this.shopForm.shopName=""
                    this.shopForm.shopTypeId=""
                    this.$refs.upload.clearFiles()
                    this.$emit('update:shopVisible',false)
                    this.$store.dispatch("getShopList")
                    this.$message({
                        message:res.msg,
                        type: 'success'
                    });
                    if(this.$route.name!=="shopList"){
                        this.$router.history.push('/shopList')
                    }
                }else{
                    this.$message.error(res.msg)
                }
            }
        },
        created() {
            if(this.shopTypeId){
                this.shopForm.shopTypeId=this.shopTypeId
            }
            if(this.shopInfo._id){
             this.shopForm.shopName=this.shopInfo.shopName
                this.shopForm.shopTypeId=this.shopInfo.shopTypeId
                this.fileList=[
                    {
                        name:this.shopInfo.shopPic,
                        url:"/api/"+this.shopInfo.shopPic,
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>